<template>
	<el-container>
		<el-header>注册</el-header>
		<el-main>
		
			<el-row :gutter="20">
				<el-col :span="10">
					<div class="grid-content bg-purple" align="right">姓名：</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple" align="center">
						<el-input  placeholder="请输入姓名" v-model="test.name"></el-input>
					</div>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="10">
					<div class="grid-content bg-purple" align="right">性别：</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple" align="center">
						<el-input  placeholder="请输入性别" v-model="test.gender" ></el-input>
					</div>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="10">
					<div class="grid-content bg-purple" align="right">身份证：</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple" align="center">
						<el-input  placeholder="请输入身份证" v-model="test.id_information" ></el-input>
					</div>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="10">
					<div class="grid-content bg-purple" align="right">手机号：</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple" align="center">
						<el-input  placeholder="请输入手机号" v-model="test.tel" ></el-input>
					</div>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :span="10">
					<div class="grid-content bg-purple" align="right">短信验证码：</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple" align="center">
						<el-input  placeholder="请输入验证码" v-model="test.ver" ></el-input>
					</div>
				</el-col>
				
				<el-col :span="10">
					<div class="grid-content bg-purple" align="left">
							<el-button>获取验证码</el-button>
					</div>
				</el-col>

			</el-row>
						
			<el-row :gutter="20">
				<el-col :span="10">
					<div class="grid-content bg-purple" align="right">输入密码：</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple" align="center">
						<el-input  placeholder="请输入密码" v-model="test.password" show-password></el-input>
					</div>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="10">
					<div class="grid-content bg-purple" align="right">再次输入密码：</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple" align="center">
						<el-input  placeholder="请再次输入密码" v-model="test.ensure" show-password></el-input>
					</div>
				</el-col>
			</el-row>
			
<!-- 			
			<el-row :gutter="20">
				<el-col :span="10">
					<div class="grid-content bg-purple" align="right" >病历号：</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple" align="center" >
						<el-input v-model="test.patid" :disabled="true"></el-input>
					</div>
				</el-col>
			</el-row>
			 -->
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="grid-content bg-purple">
						<el-button :plain="true"  @click="created">确定</el-button>
					</div>
				</el-col>
			</el-row>
			

			<el-dialog title="注册成功!" :visible.sync="dialogFormVisible">
				<el-form :model="test">
					<el-row :gutter="20">
						<el-col :span="10">
							<div class="grid-content bg-purple" align="right" >病历号：</div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple" align="center" >
								<el-input v-model="test.patid" :disabled="true"></el-input>
							</div>
						</el-col>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary "  @click="Add">确 定</el-button>
				</div>
			</el-dialog>
					
		</el-main>
		<el-footer>
			<el-row :gutter=" 20">
				<!-- <el-col :span="4">
					<div class="grid-content bg-purple1">
						<el-button>返回主界面</el-button>
					</div>
				</el-col> -->
				<el-col :span="16">
					<div class="grid-content bg-purple1" align="center"></div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple1">
					</div>
				</el-col>
			</el-row>
		</el-footer>
	</el-container>
</template>

<script>
	import {
		showMsgTitle
	} from '@/utils/api2'
	import {
		showMsgConfirm
	} from '@/utils/api2'
	import {
		getRequest
	} from '@/utils/api2'
	import {
		postRequest
	} from '@/utils/api2'
	
	export default {
		data() {
			return {
				dialogFormVisible:false,
				test:{
				name:'',
				gender:'',
				id_information:'',
				tel:'',
				ver:'',
				password: '',
				ensure: '',
				patid: ''
				}
			}
		},
		// mounted: function() {
		// 	let url = "/insertPatient";
		// 	let _this = this;
		// 	getRequest(url).then(resp => {
		// 		if (resp.status == 200) {
		// 			//alert(resp.data);
		// 			_this.test = resp.data;
		// 		} else {
		// 			_this.$message({
		// 				type: 'error',
		// 				message: '数据加载失败!'
		// 			});
		// 		}
		// 	}, resp => {
		// 		_this.loading = false;
		// 		if (resp.response.status == 403) {
		// 			_this.$message({
		// 				type: 'error',
		// 				message: resp.response.data
		// 			});
		// 		} else {
		// 			_this.$message({
		// 				type: 'error',
		// 				message: '数据加载失败!'
		// 			});
		// 		}
		// 	}).catch(resp => {
		// 		//压根没见到服务器
		// 		_this.loading = false;
		// 		_this.$message({
		// 			type: 'error',
		// 			message: '数据加载失败!'
		// 		});
		// 	});
		// 	// this.axios.get('/api/user/allUser')
		// 	// 	.then(res => {
		// 	// 		this.tableData = res.data;
		// 	// 	})
		// 	// 	.catch(function(error) {
		// 	// 		console.log(error);
		// 	// 	});
		// },


		methods: {
		Add() {
			
			    location.href='/';
				this.dialogFormVisible = false;
				console.log(this.test);
				postRequest('/insertPatient', this.test);
					
			},
		created () {
			this.dialogFormVisible = true;
		  // 调用获取当前日期的方法加四位随机数  赋值表单中的项目编号
		  this.test.patid = this.getProjectNum() + Math.floor(Math.random() * 10000)  // 如果是6位或者8位随机数，相应的 *1000000或者 *100000000就行了
		},			
			getProjectNum () {
				//this.$message({showClose: true,message: '注册成功！',type: 'success'});
				
			      const projectTime = new Date() // 当前中国标准时间
			      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
			      const Month = projectTime.getMonth() + 1 // 获取中国区月份
			      const Day = projectTime.getDate() // 获取几号
			      var CurrentDate = String(Year)
			      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
			        CurrentDate += Month
			      } else {
			        CurrentDate += '0' + Month
			      }
			      if (Day >= 10) {
			        CurrentDate += Day
			      } else {
			        CurrentDate += '0' + Day
			      }
			      return CurrentDate
			    },	

			// open1() {
			// 	this.$message({showClose: true,message: '注册成功！',type: 'success'});
			//  }
		},
		
		
	}
</script>
<style>
	.el-footer {
		background-color: #4FC1B0;
		color: #333;
		text-align: center;
		line-height: 60px;
		border-radius: 10px;
	}

	.el-header {
		text-align: left;
		font-size: 40px;
		color: #ffffff;
		border-radius: 10px;
		background-color: #4FC1B0;
	}

	.el-main {
		background-color: #ffffff;
		color: #333;
		text-align: center;
		height: 610px;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}


	.bg-purple {
		background: #ffffff;
	}

	.bg-purple1 {
		background: #4FC1B0;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 50px;
		font-size: 24px;
	}

	.grid-content1 {
		border-radius: 4px;
		min-height: 160px;

	}
</style>
